<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="gid" label="Gid"/>
    <el-table-column prop="name" label="品牌名称"/>
    <el-table-column prop="url" label="官网"/>
    <el-table-column prop="logo" label="Logo">
      <template #default="scope">
        <el-image style="width: 100px; height: 100px" :src="scope.row.logo" :fit="fit" />
      </template>
    </el-table-column>

    <el-table-column prop="descs" label="描述"/>
    <el-table-column align="right">
      <template #header>
        <el-button size="small" type="primary" @click="addGoods">
          添加
        </el-button>
      </template>
    </el-table-column>
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" @input="query" size="small" placeholder="品牌名称"/>
      </template>
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页  -->
  <div class="demo-pagination-block" v-if="tableData">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20, 30]"
        size="large"
        :disabled="disabled"
        background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!--模态框-->
  <el-dialog v-model="dialogFormVisible" title="编辑品牌" width="500">
    <el-form :model="form">
      <el-form-item label="Gid" v-if="form.gid" :label-width="formLabelWidth">
        <el-input v-model="form.gid" autocomplete="off" disabled/>
      </el-form-item>
      <el-form-item label="品牌名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="官网" :label-width="formLabelWidth">
        <el-input v-model="form.url" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="Logo" :label-width="formLabelWidth">
       <el-upload
          v-model:file-list="fileList"
          class="upload-demo"
          action="http://192.168.2.230:8000/goods/upLogo"
          :on-success="handlePreview"
          :on-remove="handleRemove"
          :headers="tokens"
          list-type="picture"
      >
        <el-button type="primary" @click="uploadLogo">上传品牌logo</el-button>
        <template #tip>
          <div class="el-upload__tip">
            jpg/png files with a size less than 500kb
          </div>
        </template>
      </el-upload>
      </el-form-item>

<!--      <el-form-item label="Logo" :label-width="formLabelWidth">
        <el-input v-model="form.logo" autocomplete="off"/>
        <el-input type="file"></el-input>
      </el-form-item>-->

      <el-form-item label="描述" :label-width="formLabelWidth">
        <el-input v-model="form.descs" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {onActivated, onMounted, reactive, ref, toRef, toRefs, watch} from "vue";
import {goodsDelById, goodsFindAll, goodsSave} from "@/api/brand";
import {ElMessage} from "element-plus";
import store from "@/store";

const tokens = ref()
const fileList = ref([
  {
    name: '',
    url: '',
  }
])

const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePreview  = (all,bt,cache) => {
  form2.value.logo = all.data
}
const uploadLogo = () => {
  tokens.value = {"X-Token":store.state.user.token}
}
// 模态框展示
const dialogFormVisible = ref(false)
const tableData = ref()

function loadAll(v) {
  goodsFindAll({"current": currentPage.value, "size": pageSize.value, 'name': v})
      .then(res => {
        let {success, msg, data} = res
        if (success) {
          tableData.value = data.goods
          currentPage.value = data.current
          total.value = data.total
        } else {
          ElMessage.error(msg)
        }
      }).catch(e => {
    ElMessage.error(e)
  })
}
//
// onActivated(() => {
//   alert('ffff')
// })

onMounted(() => {
  loadAll()
})
const handleEdit = (index, row) => {
  fileList.value[0].url = row.logo
  fileList.value[0].name = row.name
  dialogFormVisible.value = true
  form.value = row
}
const handleDelete = (index, row) => {
  goodsDelById(row.gid).then(res => {
    let {success, msg, data} = res
    if (success) {
      loadAll()
      ElMessage.success(msg)
    } else {
      ElMessage.error(msg)
    }
  }).catch(e => {
    ElMessage.error(e)

  })

}

const formLabelWidth = '140px'
const form = ref({
  gid: 0,
  name: '',
  url: '',
  logo: '',
  descs: '',
})
const form2 = ref({
  name: '',
  url: '',
  logo: '',
  descs: '',
})
const save = () => {
  goodsSave(form.value).then(res => {
    let {success, msg, data} = res
    if (success) {
      loadAll()
      ElMessage.success(msg)
    } else {
      ElMessage.error(msg)
    }
    dialogFormVisible.value = false
  }).catch(e => {
    ElMessage.error(e)
    dialogFormVisible.value = false
  })
}
const addGoods = () => {

  form.value = form2.value
  dialogFormVisible.value = true
}
const search = ref()
const query = function (f) {
  loadAll(search.value)
}
// 分页
const currentPage = ref(1)
const total = ref(100)
const pageSize = ref(5)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (number) => {
  pageSize.value = number
  loadAll()
}
const handleCurrentChange = (number) => {
  currentPage.value = number
  loadAll()
}
</script>
<style>
.demo-pagination-block {
  text-align: right;
  padding-right: 20px;
  padding-top: 20px;
}
</style>
